<template>
    <div class="notice-cont">
        <div class="img-intro">
            <!-- <img :src="info.image" alt=""> -->
            <video style="width: 100%;" id="video" @click="onPlay()" :src="info.file"></video>
            <!-- <div class="time-cont">
                <p>{{ info.createtime_text }}</p>
            </div> -->
        </div>
        <h2>{{ info.name }}</h2>
        <h3>{{ info.intro }}</h3>
    </div>
</template>

<script setup>
import { defineProps } from 'vue';
import { useRouter } from 'vue-router';
const props = defineProps(['info'])
const router = useRouter()


const onPlay = () => {
    const elVideo = document.getElementById('video')
    console.log(elVideo);
    setTimeout(() => {
        if (elVideo.requestFullscreen) {
            elVideo.requestFullscreen()
        } else if (elVideo.mozRequestFullScreen) {
            elVideo.mozRequestFullScreen()
        } else if (elVideo.webkitRequestFullScreen) {
            elVideo.webkitRequestFullScreen()
        } else if (elVideo.webkitEnterFullScreen) {
            // Toggle fullscreen in Safari for iPad
            elVideo.webkitEnterFullScreen()
        }
        elVideo.play()
    }, 500)
}


const handleJump = () => {
    router.push({
        path: '/notice-detail',
        query: {
            id: props.info.id,
            title: props.info.title
        }
    })
}
</script>

<style lang="scss" scoped>
.notice-cont {
    width: 1.5625rem;
    height: 1.6667rem;
    background: #FFFFFF;
    box-shadow: 0rem .0104rem .1927rem .0156rem #EEEEEE;
    border-radius: .0521rem;
    margin-bottom: .1563rem;
    margin-right: .1042rem;
    cursor: pointer;

    >.img-intro {
        width: 1.5625rem;
        height: 1.1719rem;
        position: relative;
        margin-bottom: .099rem;

        >img {
            width: 100%;
            height: 100%;
        }

        >.time-cont {
            position: absolute;
            width: .625rem;
            height: .2083rem;
            background: #000000;
            opacity: 0.5;
            left: 0;
            bottom: 0;
            z-index: 1;
            text-align: center;
            line-height: .2083rem;
            font-size: .0729rem;
            font-weight: 300;
            color: #FFFFFF;
        }
    }

    >h2 {
        padding: 0 .099rem;
        font-size: .0833rem;
        font-weight: 400;
        color: #333333;
        text-overflow: ellipsis;
        /* 溢出显示省略号 */
        overflow: hidden;
        /* 溢出隐藏 */
        white-space: nowrap;
        /* 强制不换行 */
        margin-bottom: .0885rem;
    }

    >h3 {
        font-size: .0625rem;
        font-weight: 300;
        color: #999999;
        padding: 0 .099rem;
    }
}
</style>